<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Grid</title>

  <link rel="stylesheet" href="./demo.css">
</head>
<body>
  
  <p>用了在线第三方库，需联网查看效果,文章参考链接：
    <a href="http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html">CSS Grid 网格布局教程</a>
  </p>
  <span>foo</span>
  <div id="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
  </div>
  <span>bar</span>

  <p>设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。</p>
  <span>1.1</span>
  <button id="inline-grid">display: inline-grid</button>
  <button id="grid">display: grid</button>
  <br>
  <span>1.2:grid-template-columns:</span>
  <input type="text" id="grid-template-colums">
  <button id="grid-template-columns-ok">ok</button>
  <br>
  <span>grid-template-rows:</span>
  <input type="text" id="grid-template-rows">
  <button id="grid-template-rows-ok">ok</button>
  <p>repeat() | auto-fill 关键字 | fr 关键字 | minmax() | </p>

  <span>1.3:grid-gap:间距</span>
  <input type="text" id="grid-gap">
  <button id="grid-gap-ok">ok</button>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script src="./demo1.js"></script>
</body>
</html>